import React, { Component } from 'react';


export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state = {
      age: props.age,
      money: 2000
    }
  }
  onAddage() {
    this.state.money +=3;
    console.log(this.money);
    this.setState({
      age: this.state.age + 5
    })
    console.log(this.state.age);
  }
  onChangeBtn() {
    this.props.changeTitle('这是标题啊')
  }
  render() {
    console.log(this.props);
    let money = 1000
    const list = [
      {id:1, text:'Cras justo sdfodio2'},
      {id:2, text:'Dapibus ac facilisis in'},
      {id:3, text:'Morbi leo risus'},
      {id:4, text:'Porta ac consectetur ac'},
      {id:5, text:'Vestibulum at eros'}
    ]
    return (
      <div>
        <div className="alert alert-primary" >
          This age is {this.state.age} ${money} and ${this.state.money} a primary alert—check it out!
        </div>
        <button className="btn btn-primary" onClick={() => {this.onAddage()}}>按钮啊</button>
        <hr/>
        <button className="btn btn-primary" onClick={this.onChangeBtn.bind(this)}>调用父组件方法</button>
        <ul className="list-group">
          {
            list.map((item) => {
              return (
                <li className="list-group-item list-group-item-action" key={item.id}>{item.text}</li>
              )
            })
          }
        </ul>
        <div className="form-group">
          <label htmlFor="exampleInputEmail1">Email address</label>
          <input type="email" className="form-control" aria-describedby="emailHelp" placeholder="Enter email" />
          <small className="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>

        <span className="badge badge-success">Success</span>
      </div>
    );
  }
}
